<!--
 * @Author: xfworld
 * @Date: 2020-06-04 15:01:28
 * @LastEditors: xfworld
 * @LastEditTime: 2020-06-13 10:19:16
 * @Description: 
-->
<template>
  <div class="login_container">
    <span class="logo">
      <svg-icon icon-class="logo" class="img" />
    </span>
    <van-cell-group class="login_form">
      <van-field
        v-model="username"
        id="username"
        ref="username"
        :label-width="50"
        left-icon="manager"
        label="账号"
        clearable
        @keydown.enter.native="!pdaScanData.data ? passwordFocus() : ''"
        :error="isUserError"
        placeholder="请输入用户名"
        @focus="focusHandle"
      />
      <van-field
        v-model="password"
        id="password"
        ref="password"
        left-icon="lock"
        :label-width="50"
        :error="isPassError"
        clearable
        type="password"
        label="密码"
        placeholder="请输入密码"
        @keydown.enter.native="!pdaScanData.data ? handleAction() : ''"
        @focus="focusHandle"
      />
      <van-button
        class="login_btn"
        type="primary"
        :loading="showLoading"
        loading-type="spinner"
        block
        :loading-text="message"
        @click="handleAction"
        >登录</van-button
      >
    </van-cell-group>
  </div>
</template>
<script>
import {mapActions, mapGetters} from "vuex";
export default {
  data() {
    return {
      isUserError: false, // 账号为空时显示
      isPassError: false, // 密码为空时显示
      showLoading: false, // 是否加载loading
      message: "", // 按钮上的加载
      username: "", // 账号
      password: "" // 密码
    };
  },
  beforeDestroy() {
    this.showLoading = false;
    this.message = "";
  },
  computed: {
    ...mapGetters("scanner", ["pdaScanData"])
  },
  created() {
    this.usernameFocus();
  },
  watch: {
    pdaScanData: {
      handler(data) {
        let input = document.activeElement.id;
        if (input == "username") {
          this.username = data.data;
          this.passwordFocus();
        } else if (input == "password") {
          this.password = data.data;
          this.handleAction();
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions("user", ["handleLogin"]),
    focusHandle() {
      this.isUserError = false;
      this.isPassError = false;
    },
    handleAction() {
      if (!this.username) {
        this.isUserError = true;
      } else if (!this.password) {
        this.isPassError = true;
      } else {
        this.showLoading = true;
        this.message = "登录中...";
        // setTimeout(() => {
        //     this.$router.push("/home");
        //     this.showLoading = false;
        // }, 1500);
        this.handleLogin({
          userName: this.username,
          password: this.password
        })
          .then(res => {
            this.showLoading = false;
            if (res !== null && res.data !== null) {
              if (res.data.status) {
                this.$toast.success("登录成功!");
                this.$router.push({
                  name: this.$config.homeName
                });
              } else {
                this.$toast.fail(res.data.message);
              }
            } else {
              this.$toast.fail("登录请求无任何返回，请与管理员联系");
            }
          })
          .catch(e => {
            this.showLoading = false;
            this.$toast.fail("登录请求失败，请与管理员联系" + e);
          });
      }
    },
    usernameFocus() {
      this.$nextTick(() => {
        this.$refs["username"].focus();
      });
    },
    passwordFocus() {
      if (this.username) {
        this.$nextTick(() => {
          this.$refs["password"].focus();
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
